❤️ 🍰 🌹 🎬 🚴♀️ 🏋️♀️ 💻 🚀 💜
這裡記錄了我的學習和開發筆記，歡迎交流 (*´∀`)~♥
© 2024. All rights reserved.
從零打造前端效能監控系統 | WebConf Taiwan 2023 逐字稿
August 12, 2023 Sentry Cypress Web Vitals Memori Loading Performance Rendering Performance Core Web Vitals 效能監控 Real User Monitoring GitHub Actions CI/CD Chrome DevTools End-to-End Testing Google Analytics Lighthouse Synthetic Monitoring active monitoring cypress.io passive monitoring 加載效能 效能調校 端對端測試 自動化測試 轉譯效能 sharing WebConf Taiwan 前端效能 系列文 · 留言
在自動化測試前端效能時，可能會考慮的解法有：(1) Lighthouse CI Action 或 web-vitals library + 丟到某個地方做資料儲存和 dashboard；另一個解法是 (2) 利用 Cypress + Sentry 來取得相關資訊並做呈現。這篇文章會針對 Cypress + Sentry 這個解法做說明，並比較兩種解法。
July 11, 2023 Sentry Cypress End-to-End Testing GitHub Actions Lighthouse Loading Performance Rendering Performance Synthetic Monitoring active monitoring Web Vitals Memori 轉譯效能 加載效能 效能監控 效能調校 CI/CD Core Web Vitals cypress.io lighthouse-cli 端對端測試 自動化測試 前端效能 系列文 · 留言
剛好最近在找個能進行效能監控的工具，在考量是否能有效記錄與追蹤特定指標和錯誤、整合、即時通知與 self-hosted 後，決定使用 Sentry 來協助團隊進行效能與錯誤的監控。
June 29, 2023 Sentry Loading Performance Real User Monitoring Web Vitals passive monitoring Memori 加載效能 效能監控 效能調校 前端效能 系列文 · 留言
要選 Redux 還是 context API + useReducer 來做狀態管理呢？context API + useReducer 能完全取代 Redux 嗎？
May 25, 2023 react hooks react.js redux Web Vitals Loading Performance Rendering Performance front-end architecture Core Web Vitals 加載效能 效能調校 sharing · 留言
MOPCON 逐字稿
October 24, 2021 MOPCON Web Vitals 打造高速網站，從網站指標開始！全方位提升使用者體驗與流量的關鍵 Core Web Vitals SEO 搜尋引擎優化 效能調校 Firebase Performance Firebase Image Optimization Lighthouse Loading Performance lighthouse-cli sharing 加載效能 圖片最佳化 趨勢科技 Trend Micro Real User Monitoring Synthetic Monitoring Mixtini 前端效能 系列文 · 留言
Tipping Point Front-End Case Study and Practice: CSS
June 24, 2021 styled-system styled-components Tonic Styled UI CSS Modules CSS in JS BEM css Modern Web Loading Performance Responsive Web Design 響應式網頁 加載效能 趨勢科技 Trend Micro sharing · 留言
利用 Firebase Performance 來做 Real User Monitoring。
September 22, 2020 Firebase Performance 效能調校 加載效能 Firebase Loading Performance Real User Monitoring passive monitoring 吃什麼 前端效能 系列文 · 留言
利用 Perfume.js 與 Google Analytics 來做 Real User Monitoring。
September 22, 2020 效能調校 Perfume.js Google Analytics Loading Performance 加載效能 Real User Monitoring passive monitoring 吃什麼 前端效能 系列文 · 留言
本文說明 Lighthouse 以使用者為出發點來探討效能的指標。
September 7, 2020 Lighthouse RAIL Web Vitals 效能調校 Core Web Vitals Loading Performance 加載效能 sharing Synthetic Monitoring active monitoring Real User Monitoring passive monitoring 趨勢科技 Trend Micro 前端效能 系列文 · 留言
本文主要由此投影片「Start your app the better way with Styled System」之講稿改寫。本文會從 CSS 歷史開始談起，接著會來看過去我們在使用元件庫上遇到的問題，以及怎麼使用 Styled System 來解決這些問題。
February 25, 2020 styled-system styled-components CSS Modules CSS in JS BEM css End-to-End Testing 端對端測試 Media Query Modern Web Loading Performance Responsive Web Design react.js webpack 自動化測試 響應式網頁 加載效能 sharing · 留言
利用 Styled System 建立一個更好的 UI 元件庫！
November 30, 2019 styled-system styled-components CSS Modules CSS in JS OOCSS BEM SMACSS css Bootstrap Critical Rendering Path End-to-End Testing 端對端測試 Loading Performance Media Query Modern Web Rendering Performance Responsive Web Design react.js webpack 加載效能 效能調校 自動化測試 轉譯效能 關鍵轉譯路徑 響應式網頁 sharing 趨勢科技 Trend Micro · 留言
這道題目涵蓋前端技術範圍很廣，很適合在各階段拿來梳理並檢視自己的技能和狀態。那麼，就讓我來檢視一下自己的狀態吧 d(`･∀･)b
November 26, 2018 效能調校 關鍵轉譯路徑 圖片最佳化 轉譯效能 你懂JavaScript嗎？ 你所不知道的JS 加載效能 快取 Rendering Performance Critical Rendering Path Resource Hints Web Workers Worker requestAnimationFrame Gzip HTTP Caching Loading Performance You-Dont-Know-JS cache javascript javascript prototype undefined 編碼 解碼 encode decode base-64 前端效能 系列文 · 留言
說明常用的效能測量指標。
September 13, 2018 Web Vitals 效能調校 加載效能 Loading Performance 前端效能 系列文 · 留言
針對網站進行各種工具的測試並做優化。
September 11, 2018 效能調校 加載效能 Lighthouse Loading Performance 吃什麼 Gzip 前端效能 系列文 · 留言
本文主要探討記憶體快取、Service Worker 快取、HTTP 快取和 Push 快取。
September 10, 2018 快取 Service Worker 效能調校 cache HTTP Caching 加載效能 Loading Performance 前端效能 系列文 · 留言
網頁上所有的文字、圖片、樣式和腳本都需要經由發送 HTTP Requests 從伺服器下載來取得，網頁大部份的時間大都花在下載資源上，只有少少的時間是花在渲染上。本文主要探討如何減少 HTTP Requests 的數量。
September 8, 2018 效能調校 加載效能 base-64 Loading Performance 前端效能 系列文 · 留言
在檢測加載效能時，我們會使用一些工具做測量，而使用這些工具的目的是為了量化效能優劣狀況（來做比較），找出潛在問題並改善，例如：圖檔大小、HTTP Request 數量、程式碼是否最小化、壓縮、快取等。
September 5, 2018 效能調校 圖片最佳化 Lighthouse 加載效能 Loading Performance 吃什麼 Image Optimization 前端效能 系列文 · 留言
文字資源（Text Content）的優化，以下列出加快從伺服器下載的有效方法。
September 5, 2018 效能調校 加載效能 Gzip Loading Performance 吃什麼 前端效能 系列文 · 留言
在行動裝置上關於圖片常遇到圖檔體積過大或解析度不佳等問題，這些問題可經由選擇適當的圖片格式、壓縮、設定適合的尺寸、依照解析度提供適當的圖片來解決，本文要探討的是如何在 HTML 上使用 picture 與 img srcset sizes 來讓瀏覽器根據自身環境選擇適當的圖檔。
August 24, 2018 圖片最佳化 效能調校 加載效能 Image Optimization Loading Performance 響應式網頁 Responsive Web Design Media Query Core Web Vitals Web Vitals 前端效能 系列文 · 留言
記錄圖片壓縮要做的事情、推薦圖片壓縮和效能檢測的工具。
August 22, 2018 圖片最佳化 效能調校 Responsive Web Design 加載效能 Image Optimization Loading Performance gulp Lighthouse 響應式網頁 吃什麼 前端效能 系列文 · 留言
小圖示的顯示和壓縮技術的演進從 .png、.jpg 或 .gif 圖檔、Image Sprites，到 Base64、Icon Fonts 再來到 SVG 與 SVG Sprites，來看看到底 SVG Sprites 哪裡好 (✪ω✪) 本文前半段著重在產生 SVG Sprites 的方法和如何使用 SVG Symbols 定位；後半段說明各種 SVG Icon 的使用方式和優缺比較。
August 20, 2018 SVG 圖片最佳化 效能調校 加載效能 Image Optimization Loading Performance gulp react.js 吃什麼 編碼 解碼 encode decode base-64 前端效能 系列文 · 留言
比較 Preload 與 Prefetch 的異同。
July 31, 2018 Resource Hints 效能調校 加載效能 圖片最佳化 HTTP Caching Loading Performance Image Optimization 吃什麼 前端效能 系列文 · 留言
實作「圖片最佳化（Image Optimization）」的第一個問題是「真的需要這個圖檔嗎？」，去除不需要的圖檔即可減少 HTTP Request。第二個問題才是「若圖檔不能去除或被取代，可以做哪些優化？」。
July 30, 2018 圖片最佳化 效能調校 加載效能 SVG Resource Hints Lighthouse Base64 Images Image Optimization Loading Performance Gzip 編碼 解碼 encode decode base-64 前端效能 系列文 · 留言
HTTP Caching。
July 27, 2018 HTTP Caching ETag 快取 效能調校 加載效能 Loading Performance cache 前端效能 系列文 · 留言
將圖片轉為編碼字串，讓開發者能將圖檔嵌入 HTML、CSS 或 JavaScript 程式碼，以減少 HTTP Request。適合較少更新的小圖，例如 icon 等。
July 26, 2018 Base64 Images 效能調校 加載效能 Loading Performance 圖片最佳化 Image Optimization base-64 Gzip 編碼 解碼 encode decode 前端效能 系列文 · 留言
以往我們都是將小圖示（icon）用切圖的方式放入網頁，而我們也可以將這些 icon 用 CSS「畫」出來。
October 8, 2013 icon fonts Loading Performance 效能調校 css 加載效能 SVG · 留言